<template>
	<div class="scan">
		<div class="top">
			<van-icon name="arrow-left" size="20px" @click="closeScan()" />
			<div>随手拍</div>
			<span @click="scanImg">相册</span>
		</div>
		<div id="bcid">
			<div style="height:40%"></div>
			<p class="tip">...载入中...</p>
		</div>
	</div>
</template>

<script>
	let scan = null
	export default {
		data() {
			return {
				codeUrl: ""
			};
		},
		mounted() {
			//跳转时自动开启
			this.startRecognize();
		},
		methods: {
			// 创建扫描控件
			startRecognize() {
				let that = this;
				if (!window.plus) return;
				scan = new plus.barcode.Barcode(
					"bcid",
					[plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13],
					{
						frameColor: "#009DE2",
						scanbarColor: "#009DE2"
					}
				);
				scan.onmarked = onmarked;

				// 开始扫描
				scan.start();
				function onmarked(type, result, file) {
					switch (type) {
						case plus.barcode.QR:
							type = "QR";
							break;
						case plus.barcode.EAN13:
							type = "EAN13";
							break;
						case plus.barcode.EAN8:
							type = "EAN8";
							break;
						default:
							type = "其它" + type;
							break;
					}
					result = result.replace(/\n/g, "");
					that.codeUrl = result;
					window.localStorage.codeUrl = result;
					// alert(result);
					plus.runtime.openURL(result, function (res) {

					})
					that.closeScan();
				}
			},
			// 关闭返回
			closeScan() {
				if (!window.plus) return;
				scan.close();
				this.$router.back();
			},
			scanImg() {
				// 从系统相册选择文件
				if (!window.plus) return;
				plus.gallery.pick(
					function (path) {
						// alert(path);
						plus.barcode.scan(
							path,
							function (type, result) {
								plus.runtime.openURL(result, function (res) {

								})
								// alert("Scan success:(" + type + ")" + result);
								window.localStorage.codeUrl2 = result;
							},
							function (e) {
								console.log(e);
								window.localStorage.codeUrl2 = e;
								plus.nativeUI.alert("如果图片无法识别,请用扫码上传");
							}
						);
					},
					function (e) {
						alert("取消选择图片");
					},
					{ filter: "image" }
				);
			},
			goback() {
				this.$router.back()
			}
		},
		beforeRouteLeave(to, from, next) {
			this.closeScan();
			next()
		 }
	};
</script>
<style lang="scss" >
	.scan {
		height: 100%;

		#bcid {
			width: 100%;
			position: absolute;
			left: 0;
			right: 0;
			top: 40px;
			bottom: 0;
			text-align: center;
			color: #fff;
			background: #ccc;
		}

		.top {
			position: fixed;
			color: white;
			top: 0;
			height: 40px;
			line-height: 40px;
			/* position: relative; */
			font-size: 16px;
			border-bottom: 1px solid #999;
			width: 100%;
			background-color: #4b77e4;
			z-index: 9999;
		}

		.top div {
			text-align: center;

		}

		.top span {
			position: absolute;
			top: 0px;
			/* width: 20px;
        height: 20px; */
			right: 10px;
		}

		.van-icon-arrow-left {
			position: absolute;
			top: 10px;
		}
	}
</style>
<!-- <template>
    <div class="scan">
      <div id="bcid">
        <div style="height:40%"></div>
        <p class="tip">...载入中...</p>
      </div>
      <footer>
        <button @click="startRecognize">1.创建控件</button>
        <button @click="startScan">2.开始扫描</button>
        <button @click="cancelScan">3.结束扫描</button>
   
        <button @click="closeScan">4.关闭控件</button>
      </footer>
    </div>
  </template>
   
  <script >
    let scan = null;
   
    export default {
      data() {
        return {
          codeUrl: '',
        }
      },
      methods: {
        //创建扫描控件
        startRecognize() {
          let that = this;
          if (!window.plus) return;
          scan = new plus.barcode.Barcode('bcid');
          scan.onmarked = onmarked;
   
          function onmarked(type, result, file) {
            switch (type) {
              case plus.barcode.QR:
                type = 'QR';
                break;
              case plus.barcode.EAN13:
                type = 'EAN13';
                break;
              case plus.barcode.EAN8:
                type = 'EAN8';
                break;
              default:
                type = '其它' + type;
                break;
            }
            result = result.replace(/\n/g, '');
            that.codeUrl = result;
            alert(result);
            that.closeScan();
   
          }
        },
        //开始扫描
        startScan() {
          if (!window.plus) return;
          scan.start();
        },
        //关闭扫描
        cancelScan() {
          if (!window.plus) return;
          scan.cancel();
        },
        //关闭条码识别控件
        closeScan() {
          if (!window.plus) return;
          scan.close();
        },
      }
    }
  </script>
  <style lang="scss">
    .scan {
      height: 100%;
      #bcid {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom:3rem;
        text-align: center;
        color: #fff;
        background: #ccc;
      }
      footer {
        position: absolute;
        left: 0;
        bottom: 1rem;
        height: 2rem;
        line-height: 2rem;
        z-index: 2;
      }
    }
  </style> -->